<link rel="stylesheet" href="/bower_components/bootstrap/dist/css/bootstrap.min.css">
<!-- Font Awesome -->
<link rel="stylesheet" href="/bower_components/font-awesome/css/font-awesome.min.css">

<!-- Theme style -->
<link rel="stylesheet" href="/dist/css/AdminLTE.min.css">
<!-- AdminLTE Skins. Choose a skin from the css/skins
     folder instead of downloading all of them to reduce the load. -->
<link rel="stylesheet" href="/dist/css/skins/_all-skins.min.css">
<!-- iCheck -->
<link rel="stylesheet" href="/plugins/iCheck/flat/blue.css">
<div class="box box-primary">
    <div class="box-header with-border">
        <h3 class="box-title">日志管理</h3>

        <div class="box-tools pull-right">
           <div class="input-group" style="width:350px">
               <input type="text"id="searchNameId" class="form-control" placeholder="用户名">
               <span class="input-group-btn">
                   <button class="btn btn-default glyphicon glyphicon-search findUsernameBtn" type="button" style="top: 0px;">搜索</button>
               </span>
           </div>
        </div>
        <!-- /.box-tools -->
    </div>
    <!-- /.box-header -->
    <div class="box-body no-padding">

        <div class="table-responsive mailbox-messages">
            <table class="table table-hover table-striped">

                <thead>
                <th>
                    <button type="button" class="btn btn-default btn-sm checkbox-toggle"><i class="fa fa-square-o"></i>
                    </button>
                </th>
                <th>用户名</th>
                <th>操作</th>
                <th>请求方法</th>
                <th>请求参数</th>
                <th>时长</th>
                <th>IP</th>
                <th>创建时间</th>
                </thead>
                <tbody id="tbodyId">
                <tr>
                    <td colspan="7">页面正在加载中。。。。。</td>
                </tr>

                </tbody>
            </table>
            <!-- /.table -->
        </div>
        <!-- /.mail-box-messages -->
    </div>
    <!-- /.box-body -->
    <div class="box-footer no-padding">
        <div class="mailbox-controls">
            <!-- Check all button -->
            <button type="button" class="btn btn-default btn-sm checkbox-toggle"><i class="fa fa-square-o"></i>
            </button>
            <div class="btn-group">
                <button type="button" class="btn btn-default btn-sm deleteBtn"><i class="fa fa-trash-o"></i></button>
            </div>
            <!-- /.btn-group -->
            <button type="button" class="btn btn-default btn-sm"><i class="fa fa-refresh refreshBtn"></i></button>

            <div id="pageID" class="pull-right">
                <ul class="pageination pagination-sm">
                    <li><a class="first">首页</a></li>
                    <li><a class="pre">上一页</a></li>
                    <li><a class="next">下一页</a></li>
                    <li><a class="last">尾页</a></li>
                    <li><a class="rowCount">总记录数</a></li>
                    <li><a class="pageCount">总页数</a></li>
                    <li><a class="pageCurrent">当前页</a></li>
                </ul>
            </div>
            <!-- /.pull-right -->
        </div>
    </div>
</div>
<!-- jQuery 3 -->
<script src="/bower_components/jquery/dist/jquery.min.js"></script>
<!-- Bootstrap 3.3.7 -->
<script src="/bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
<!-- Slimscroll -->
<script src="/bower_components/jquery-slimscroll/jquery.slimscroll.min.js"></script>
<!-- FastClick -->
<script src="/bower_components/fastclick/lib/fastclick.js"></script>
<!-- AdminLTE App -->
<script src="/dist/js/adminlte.min.js"></script>
<!-- iCheck -->
<script src="/plugins/iCheck/icheck.min.js"></script>
<!-- Page Script -->
<script>
    $(function () {
        //Enable iCheck plugin for checkboxes
        //iCheck for checkbox and radio inputs
        $('.mailbox-messages input[type="checkbox"]').iCheck({
            checkboxClass: 'icheckbox_flat-blue',
            radioClass: 'iradio_flat-blue'
        });

        //Enable check and uncheck all functionality
        $(".checkbox-toggle").click(function () {
            var clicks = $(this).data('clicks');
            if (clicks) {
                //Uncheck all checkboxes
                $(".mailbox-messages input[type='checkbox']").iCheck("uncheck");
                $(".fa", this).removeClass("fa-check-square-o").addClass('fa-square-o');
            } else {
                //Check all checkboxes
                $(".mailbox-messages input[type='checkbox']").iCheck("check");
                $(".fa", this).removeClass("fa-square-o").addClass('fa-check-square-o');
            }
            $(this).data("clicks", !clicks);
        });

        //Handle starring for glyphicon and font awesome
        $(".mailbox-star").click(function (e) {
            e.preventDefault();
            //detect type
            var $this = $(this).find("a > i");
            var glyph = $this.hasClass("glyphicon");
            var fa = $this.hasClass("fa");

            //Switch states
            if (glyph) {
                $this.toggleClass("glyphicon-star");
                $this.toggleClass("glyphicon-star-empty");
            }

            if (fa) {
                $this.toggleClass("fa-star");
                $this.toggleClass("fa-star-o");
            }
        });
    });
</script>
<!-- AdminLTE for demo purposes -->
<script src="/dist/js/demo.js"></script>
<script type="text/javascript">
    $(function () {
        $("#pageID").load("doPageUI",function () {
            doGetObjects();
        });
        $(".input-group").on("click",".findUsernameBtn",doQueryObjects);
        $(".refreshBtn").click(function () {
            doGetObjects();
        })
        $(".mailbox-controls").on("click",".deleteBtn",doDeleteObjects);
    })
    function doDeleteObjects() {
        var ids=doGetCheckedIds();
        console.log(ids);
        var url="/log/doDeleteObjects";
        var params={ids:ids.toString()};
        $.post(url,params,function (result) {
            if(result.state==1){
                alert("删除成功");
                doGetObjects();
            }else {
                alert(result.message);
            }
        })
    }
    function doGetCheckedIds() {
        var array=[];
        $("#tbodyId input[type='checkbox']").each(function () {
            if($(this).prop("checked")){
                array.push($(this).val());
            }
        })
        return array;
    }
    function doQueryObjects() {
        $("#pageID").data("pageCurrent",1);
        doGetObjects();
    }
    function doGetObjects() {
        var url="/log/doFindPageObjects";

        var pageCurrent=$("#pageID").data("pageCurrent");
        if(!pageCurrent)
            pageCurrent=1;
        var params={pageCurrent:pageCurrent};
        var username=$("#searchNameId").val();
        if(username)
            params.username=username;
        console.log(params);

        $.getJSON(url,params,function (result) {
            doHandlerResponseResult(result);
        })
    }
    function doHandlerResponseResult(result) {
        if (result.state==1){
            doSetTableBodyRows(result.data.records);

            //加载分页信息
            doSetPage(result.data);
        }else {
            alert(result.message);
        }
    }
    function doSetTableBodyRows(records) {
        var tbody=$("#tbodyId");
        tbody.empty();
        for(var i=0;i<records.length;i++){
            var tr =$("<tr></tr>");
            var tds=doCreateTds(records[i]);
            tr.append(tds);
            tbody.append(tr);
        }
    }
    function doCreateTds(row) {
        var tds="<td><input type='checkbox' value='"+row.id+"'></td>"+
                "<td>"+row.username+"</td>"+
                "<td>"+row.operation+"</td>"+
                "<td>"+row.method+"</td>"+
                "<td>"+row.params+"</td>"+
                "<td>"+row.time+"</td>"+
                "<td>"+row.ip+"</td>"+
                "<td>"+row.createdtime+"</td>";
        return tds;
    }
</script>